<template>
  <div>
    <button @click="cName='MyTop'">Top组件</button>
    <button @click="cName='MyBottom'">Bottom 组件</button>
    <!-- 给动态组件套一层 keep-alive ,可以保持组件不被销毁,从而可以保持组件的状态 -->
    <!-- include="组件1,组件2" 多个组件逗号隔开,不需要加空格 表示那些组件需要保持状态,不指定就不会缓存 而被销毁  -->
    <!-- exclude="组件1,组件2" 表示那些组件不需要保持状态,不指定就会被缓存不被销毁 -->
    <keep-alive >
       <!-- 动态组件,使用 component标签,关键是:is属性,属性值是组件名-->
     <component :is="cName"></component>
    </keep-alive>
   
  </div>
</template>

<script>
import MyTop from '@/components/MyTop.vue'
import MyBottom from '@/components/MyBottom.vue'
export default {
   components:{
    MyTop,MyBottom
  },
  data(){
    return {
      cName:'MyTop'
    }
  }
}
</script>

<style>

</style>